<template>
	<view class="page">

		<view class="header-container">

			<view class="header">
				<!-- 左上角图标 -->
				<image src="../../static/icons2/icon_main.png" class="btn-ico"></image>

				<!-- 中间搜索栏 -->
				<view class="searchbar">
					<image src="../../static/icons2/search.png" class="search-ico"></image>
					<input type="text" value="" class="search-input" placeholder="搜索" />
				</view>

				<!-- 右上角图标 -->
				<image src="../../static/icons2/msg.png" class="btn-ico"></image>

			</view>

			<!-- 头部内容 -->
			<view class="header-content">
				<view class="left">
					<view class="title">数学精品课</view>
					<view class="sub-title">读懂考官套路，轻松备战考试</view>
					<navigator url="../charts-demo/charts-demo">
						<button type="default" class="btn-study">我要学习</button>
					</navigator>
					
				</view>

				<view class="right">
					<image src="../../static/icons2/right.png" class="poster"></image>
				</view>
			</view>
		</view>

		<view class="content-container">
			<view class="menu">
				<!-- 菜单 -->
				<view class="item">
					<!-- 菜单项 -->
					<view class="img-wrapper">
						<image src="../../static/icons2/question_bank.png" class="img"></image>
					</view>

					<text class="txt">题库</text>
				</view>

				<view class="item">
					<!-- 菜单项 -->
					<view class="img-wrapper">
						<image src="../../static/icons2/question_bank.png" class="img"></image>
					</view>

					<text class="txt">题库</text>
				</view>

				<view class="item">
					<!-- 菜单项 -->
					<view class="img-wrapper">
						<image src="../../static/icons2/question_bank.png" class="img"></image>
					</view>

					<text class="txt">题库</text>
				</view>

				<view class="item">
					<!-- 菜单项 -->
					<view class="img-wrapper">
						<image src="../../static/icons2/question_bank.png" class="img"></image>
					</view>

					<text class="txt">题库</text>
				</view>
			</view>

			<view class="menu2">
				<!-- 菜单2 -->
				<view class="item">
					<!-- 菜单项 -->
					<view class="img-wrapper">
						<image src="../../static/icons2/exam.png" class="img"></image>
					</view>

					<text class="txt">在线题库</text>
				</view>

				<view class="item">
					<!-- 菜单项 -->
					<view class="img-wrapper">
						<image src="../../static/icons2/exam.png" class="img"></image>
					</view>

					<text class="txt">在线题库</text>
				</view>

				<view class="item">
					<!-- 菜单项 -->
					<view class="img-wrapper">
						<image src="../../static/icons2/exam.png" class="img"></image>
					</view>

					<text class="txt">在线题库</text>
				</view>

				<view class="item">
					<!-- 菜单项 -->
					<view class="img-wrapper">
						<image src="../../static/icons2/exam.png" class="img"></image>
					</view>

					<text class="txt">在线题库</text>
				</view>
			</view>


			<scroll-view scroll-x="true" class="slider">
				<view class="item">
					<view class="item-content">
						<view class="info">
							<text class="title">班级分析</text>
							<text class="talker">主讲:</text>
						</view>

						<image src="../../static/icons2/test2.png" class="img"></image>

						<text class="free">免\n费</text>
					</view>
				</view>

				<view class="item">
					<view class="item-content">
						<view class="info">
							<text class="title">班级分析</text>
							<text class="talker">主讲:</text>
						</view>

						<image src="../../static/icons2/test2.png" class="img"></image>

						<text class="free">免\n费</text>
					</view>
				</view>

				<view class="item">
					<view class="item-content">
						<view class="info">
							<text class="title">班级分析</text>
							<text class="talker">主讲:</text>
						</view>

						<image src="../../static/icons2/test2.png" class="img"></image>

						<text class="free">免\n费</text>
					</view>
				</view>

			</scroll-view>

		</view>

		<view class="news-container">
			<view class="uni-list">
				<block v-for="(value, index) in listData" :key="index">
					<view class="uni-list-cell" hover-class="uni-list-cell-hover" @click="goDetail(value)">
						<view class="uni-media-list">
							<image class="uni-media-list-logo" :src="value.cover"></image>
							<view class="uni-media-list-body">
								<view class="uni-media-list-text-top">{{ value.title }}</view>
								<view class="uni-media-list-text-bottom">
									<text>{{ value.author_name }}</text>
									<text>{{ value.published_at }}</text>
								</view>
							</view>
						</view>
					</view>
					<!-- #ifdef APP-PLUS -->
					<view class="ad-view" v-if="(index > 0 && (index+1) % 10 == 0)">
						<ad :adpid="adpid" @error="aderror"></ad>
					</view>
					<!-- #endif -->
				</block>
			</view>
		</view>

	</view>
</template>

<script>
	import {dateUtils} from '../../common/util.js'
	
	export default {
		data() {
			return {
				banner: {},
				listData: [],
				last_id: '',
				reload: false,
				status: 'more',
				adpid: '',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				}
			}
		},
		onLoad() {
			this.getList();
		},
		onReachBottom() {
			this.status = 'more';
			this.getList();
		},
		methods: {
			getList() {
				var data = {
					column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
				};
				if (this.last_id) {
					//说明已有数据，目前处于上拉加载
					this.status = 'loading';
					data.minId = this.last_id;
					data.time = new Date().getTime() + '';
					data.pageSize = 10;
				}
				uni.request({
					url: 'https://unidemo.dcloud.net.cn/api/news',
					data: data,
					success: data => {
						if (data.statusCode == 200) {
							let list = this.setTime(data.data);
							this.listData = this.reload ? list : this.listData.concat(list);
							this.last_id = list[list.length - 1].id;
							this.reload = false;
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					}
				});
			},
			
			setTime: function(items) {
				var newItems = [];
				items.forEach(e => {
					newItems.push({
						author_name: e.author_name,
						cover: e.cover,
						id: e.id,
						post_id: e.post_id,
						published_at: dateUtils.format(e.published_at),
						title: e.title
					});
				});
				return newItems;
			},
		}
	}
</script>

<style lang="less">
	@import url('./index.less');
	@import url('@/common/uni.css');
	
	.news-container {
		margin-top: 20upx;
	}
	
	.banner {
		height: 360rpx;
		overflow: hidden;
		position: relative;
		background-color: #ccc;
	}
	
	.banner-img {
		width: 100%;
	}
	
	.banner-title {
		max-height: 84rpx;
		overflow: hidden;
		position: absolute;
		left: 30rpx;
		bottom: 30rpx;
		width: 90%;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 42rpx;
		color: white;
		z-index: 11;
	}
	
	.uni-media-list-logo {
		width: 180rpx;
		height: 140rpx;
	}
	
	.uni-media-list-body {
		height: auto;
		justify-content: space-around;
	}
	
	.uni-media-list-text-top {
		height: 74rpx;
		font-size: 28rpx;
		overflow: hidden;
	}
	
	.uni-media-list-text-bottom {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
</style>
